<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑课程</title>
    <style>
        .container .kc {
            background-color: #f5f5f5;
        }

        /* .card.col-md-4.ms-3.mt-3:hover{
            background: rgb(241, 240, 240);
        }
        .card.col-md-4.ms-3.mt-3 .mt-1.text-muted:hover,.card.col-md-4.ms-3.mt-3 .card-title:hover{
            color: rgb(97, 172, 172) !important;
        } */
        .link-secondary:hover {
            color: #0d6efd !important;
        }

        .leftmenu {
            min-height: 100vh;
        }
    </style>
</head>

<body>
    <!-- container是bootstrap的居中窄的显示方案 -->
    <div class="container bg-body-secondary">

        <div class="row">

            <div class="col-md-2 leftmenu" id="leftmenu">

            </div>

            <div class="col-md-9 kc ms-3">
                <div class="row mt-3 pb-1 border-bottom border-secondary">
                    <div class="col-md-2">添加课程</div>
                    <div class="col-md-1 offset-md-8">
                        <a class="nav-link link-success" href="javascript:history.back(-1)">返回</a>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="mb-3 row">
                        <label for="course-number" class="col-sm-2 col-form-label">课程编号:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="course-number">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="course_url" class="col-sm-2 col-form-label">图片:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="course_url">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="course-name" class="col-sm-2 col-form-label">课程名称:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="course-name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="course-number" class="col-sm-2 col-form-label">院系:</label>
                        <div class="col-sm-10">
                            <select class="form-select" name="" id="course-department">
                                <option selected>-- 请选择院系 --</option>
                                <option value="计算机科技与应用">计算机科技与应用</option>
                                <option value="中文系">中文系</option>
                                <option value="教育系">教育系</option>
                                <option value="旅游与酒店管理">旅游与酒店管理</option>
                                <option value="幼儿师范部">幼儿师范部</option>
                                <option value="音乐系">音乐系</option>
                                <option value="美术系">美术系</option>
                                <option>体育系</option>
                                <option>机电系</option>
                                <option>数学系</option>
                                <option>现代系</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="course-name" class="col-sm-2 col-form-label">教师:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="course-teacher">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="course-number" class="col-sm-2 col-form-label">年级:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="grade_code">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-sm-12">
                            <button type="button" class="btn btn-outline-primary" id="submit">编辑</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(document).ready(function () {
            function getUrlParams(key) {// 获取网址中参数信息"key"中放属性名
                var url = window.location.search.substr(1);
                if (url == '') {
                    return false;
                }
                var paramsArr = url.split('&');
                for (var i = 0; i < paramsArr.length; i++) {
                    var combina = paramsArr[i].split("=");
                    if (combina[0] == key) {
                        return combina[1];
                    }
                }
                return false;
            }
            //console.log(getUrlParams("id"));
            //获取将要编辑的数据信息 在页面显示
            //遇到问题 不知道怎么获取页面网址上的id值
            $.get(` https://unicloud.codecore.cn/ms/getCourse?id=${getUrlParams("id")}`, {}, function (params) {
                if (params.errCode == 0) {
                    let data = params.data
                    $("#course-number").val(data.calss_number)
                    $("#course_url").val(data.course_url)
                    $("#course-name").val(data.course_name)
                    $("#course-department").val(data.course_department)
                    $("#course-teacher").val(data.teacher_name)
                }
                console.log(params.data);
            })
            //点击保存更新数据
            $("#submit").click(function () {
                $.post("http://unicloud.codecore.cn/ms/courseUpdate", {
                    id: getUrlParams("id"),
                    course_url: $("#course_url").val(),
                    course_number: $("#course-number").val(),
                    course_name: $("#course-name").val(),
                    teacher_name:$("#course-teacher").val(),
                    course_department:$("#course-department").val()
                }, function (params) {
                    if (params.errCode == 0) {//更新成功跳转回去
                        // history.back();
                        // location.reload();
                        href=history.back(-1);
                    } else {
                        alert("更新失败")
                    }

                })
            })
        })
    </script>
</body>

</html>